import React from 'react'
//首先需要先导入GrandFather中暴露的context对象值
import { context } from '../GrandFather/GrandFather'
export default function Son() {
    return (
        <div style={{ width: 500, height: 300, border: '1px dashed purple' }}>
            <h3>Son</h3>
            {/* Consumer组件其中的值要求传递一个回调函数，
            其中的形式参数表示Provider中value属性值,回调函数中形式参数自定义 */}
            <context.Consumer>
                {
                    value => {
                        return <div>
                            <ul>
                                {
                                    value.userlists.length && value.userlists.map(item => {
                                        return <li key={item.id}>
                                            <span>姓名:{item.name}</span>
                                            <span>年龄:{item.age}</span>
                                        </li>
                                    })
                                }
                            </ul>
                        </div>
                    }
                }
            </context.Consumer>

        </div>
    )
}
